<template>
  <div id="borrow">
    <van-list v-model="loading" :finished="finished" :error.sync="error" error-text="加载失败，点击重试" @load="loadData">
      <van-cell-group class="list-item" v-for="item in list" :key="item.id">
        <van-cell class="list-item-one" :title="'借阅时间：'+item.create_time">
          <template>
            <van-tag :type="item.status==0?'success':'default'" mark>{{ item.status_name }}</van-tag>
          </template>
        </van-cell>

        <van-cell class="list-item-two">
          <template #title>
            <div style="display: flex">
              <van-image src="http://localhost:8080/static/img/normal.0447fe9.png"></van-image>

              <div>
                <h3>{{ item.book.b_title }}</h3>
                <p>
                  <van-tag type="default">作者：{{ item.book.b_author }}</van-tag>
                </p>
                <p>
                  <van-tag type="default">出版社：{{ item.book.b_publisher }}</van-tag>
                </p>
                <p>
                  <van-tag type="default">出版时间：{{ item.book.b_publisher_time }}</van-tag>
                </p>
              </div>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
    </van-list>

    <van-empty v-if="!list.length" style="background: #fff;"></van-empty>
  </div>
</template>

<script>
import {getBorrowList, status} from "../../request/api";

export default {
  name: "Index",
  data() {
    return {page: 1, loading: false, finished: false, error: false, list: []};
  },
  created() {
  },
  methods: {
    async loadData() {
      try {
        const res = await getBorrowList({page: this.page});
        if (res.data.code == status.STATUS_SUCCESS) {
          this.loading = false;
          if (res.data.data.total > 0) {
            res.data.data.current_page == res.data.data.last_page && (this.finished = true);
            this.list = this.list.concat(res.data.data.data);

            this.page++;
          } else {
            this.list = [];
            this.finished = true;
          }
        }
      } catch (e) {
        this.loading = false;
        this.error = true;
      }
    }
  }
}
</script>

<style scoped>
#borrow {
  background: #f5f5f5;
  margin-bottom: 3.2rem;
}

#borrow p, #borrow h3 {
  padding: 0;
  margin: 0;
}

#borrow .list-item {
  margin-bottom: 0.5rem;
}

#borrow .list-item-one div:first-child {
  flex: 2;
}

#borrow .list-item-one .van-tag--default {
  background: #dddddd;
}

#borrow .list-item-two .van-image {
  width: 4.5rem;
  height: 6rem;
  margin-right: 0.5rem;
  border: 1px solid #ddd;
}
</style>
